<style lang="scss">
  .staff-back-container {
    .el-table {
      height: calc(100vh - 220px);
    }
  }

</style>

<template>
  <!-- 工单分发 今日预警 -->
  <el-container class="staff-back-container">
    <!-- 顶栏容器 -->
    <el-header>
      <!-- 查询框 -->
      <div class="search-box">
        <div class="conditions-box">
          <div class="conditions-item">工单编号:
            <el-input
              v-model="pageParam.condition.code"
              size="small"
              :clearable="true"
              placeholder="请输入工单编号"
              style="width: 160px;"
            ></el-input>
          </div>
          <!-- <div class="conditions-item">来信人:
            <el-input
              v-model="pageParam.condition.income"
              size="small"
              :clearable="true"
              placeholder="请输入来信人"
              style="width: 160px;"
            ></el-input>
          </div> -->
          <div class="conditions-item">工单内容:
            <el-input
              v-model="pageParam.condition.content"
              size="small"
              :clearable="true"
              placeholder="请输入内容关键字"
              style="width: 160px;"
            ></el-input>
          </div>
          <div class="conditions-item">工单来源:
            <el-select
              v-model="pageParam.condition.sourceId"
              size="small"
              :clearable="true"
              placeholder="请选择工单来源"
              @change="doSearch"
              style="width: 160px;"
            >
              <el-option
                v-for="item in sourceList"
                :key="item.lyid"
                :label="item.lymc"
                :value="item.lyid"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="search-btn">
          <el-button size="small" icon="el-icon-search" plain
            @click="doSearch" :loading="loadingTable">查询</el-button>
        </div>
      </div>
    </el-header>
    <!-- 主要区域容器 -->
    <el-main>
      <el-table :data="tableItem.list" stripe border :height="tableHeight" v-loading="loadingTable">
        <el-table-column prop="code" label="工单编号" align="left" width="180"></el-table-column>
        <el-table-column prop="sourceName" label="来源系统" align="center" width="150"></el-table-column>
        <el-table-column prop="szxx_type_sub" label="工单来源" align="center"></el-table-column>
        <el-table-column prop="income" label="来信人" align="center" width="120" show-overflow-tooltip></el-table-column>
        <el-table-column prop="empName" label="处理人" align="center" width="120"></el-table-column>
        <el-table-column prop="backTime" label="退回时间" align="center" width="220" :formatter="formatDate"></el-table-column>
        <el-table-column prop="handleDescription" label="退回原因" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="dqzt" label="当前状态" align="center"  width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.dqzt=== 2">待分发</span>
            <span v-else-if="scope.row.dqzt=== 3">待办理</span>
            <span v-else-if="scope.row.dqzt=== 4">已办理</span>
            <span v-else-if="scope.row.dqzt=== 5">已退回</span>
            <span v-else-if="scope.row.dqzt=== 8" style="color: #5AB1EF;">待审核</span>
            <span v-else-if="scope.row.dqzt=== 6" style="color: #67C23A;">已结束</span>
          </template>
        </el-table-column>
        <el-table-column prop="operations" label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button
              v-for="(item, index) in scope.row.operationsModelList"
              :key="index" :type="item.type" plain size="mini" :icon="item.icon"
              v-bind:class="'operations-'+item.handleMethod"
              @click="operationClick(item.handleMethod, scope.row)"
            >{{item.label}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tableItem.pageNum"
        :page-size="tableItem.pageSize"
        :page-sizes="[20, 30, 50, 100]"
        :total="tableItem.total"
        layout="total, sizes, prev, pager, next, jumper"
        style="float: right;"
      ></el-pagination>
    </el-main>

    <!-- 已退回查看详情 -->
    <el-dialog title="工单查看" :visible.sync="dialogBackDetail"
      width="100%" :fullscreen="fullScreen" :before-close="dialogBackCloseFn">
      <back-detail v-if="dialogBackDetail" ref="backDetail"
        v-bind:lcid="lcid"
        @dialogBackCloseFn="dialogBackCloseFn"
        @getBackPage="getBackPage"></back-detail>
    </el-dialog>
  </el-container>
</template>

<script>
  import backDetail from './staff-back-detail.vue'

  export default {
    name: 'staff-back',
    data () {
      return {
        // 主键id
        wllzid: '',
        // 流程id
        lcid: '',
        // 用户信息
        userInfo: JSON.parse(sessionStorage.getItem('GOVERNANCE_USER_INFO')),
        // 来源列表
        sourceList: [],
        // 查询参数
        pageParam: {
          pageNum: 1,
          pageSize: 20,
          condition: {
            sourceId: '',
            code: '',
            income: '',
            content: '',
            deptId: ''
          }
        },
        loadingTable: false,
        // 表格高度
        tableHeight: -1,
        // 表格列表
        tableItem: {},
        // 已下发查看
        dialogBackDetail: false,
        fullScreen: true
      }
    },
    methods: {
      // 页面初始化方法
      initFn () {
        this.getSourceList()
        this.doSearch()
      },
      // 获取来源列表
      getSourceList () {
        this.$axios.post(this.$api.source.selector).then(rs => {
          if (rs) {
            this.sourceList = rs
          }
        })
      },
      // 查询方法
      doSearch () {
        this.loadingTable = true
        this.getBackPage()
      },
      // 获取督办分页列表
      getBackPage () {
        this.pageParam.condition.deptId = this.userInfo.xtbmid
        this.$axios.post(this.$api.staff.backPage, this.pageParam)
          .then(rs => {
            if (rs) {
              this.tableItem = rs
              this.loadingTable = false
            }
          })
      },
      // 分页
      handleSizeChange: function (size) {
        this.loadingTable = true
        this.pageParam.pageSize = size
        this.getBackPage()
      },
      // 分页
      handleCurrentChange: function (currentPage) {
        this.loadingTable = true
        this.pageParam.pageNum = currentPage
        this.getBackPage()
      },
      // 日期格式化
      formatDate: function (row, column) {
        const _this = this
        var date = row.backTime
        if (date === undefined) {
          return ''
        }
        return _this.$moment(date).format('YYYY年MM月DD日 HH时MM分')
      },
      // 操作点击事件
      operationClick (method, row) {
        switch (method) {
          case 'detail':
            this.detailFn(row)
            break
        }
      },
      // 查看
      detailFn: function (item) {
        this.lcid = item.lcid
        this.dialogBackDetail = true
      },
      dialogBackCloseFn: function () {
        this.lcid = ''
        this.dialogBackDetail = false
      }
    },
    components: {
      backDetail
    },
    created: function () {

    }
  }
</script>
